<script setup lang="ts">
// import Nifi from "../../nifi";
import { ElButton, ElForm, ElFormItem, ElInput,ElSwitch } from 'element-plus';
import { IPackNifi } from "src/inter";
import { reactive, ref } from 'vue';
import {t} from "../../i18n/index"
interface Model {
    name: string;
    value: string;
    description: string;
    sensitive: boolean;
}
const emits = defineEmits<{submit:[data:Model]}>();
const props = defineProps<{title?:string,names:string[],row?:Model,box:IPackNifi.DialogEl}>()
const {title,names,row,box} = props;
//

//
const model = reactive({name:row?.name || '',value:row?.value || '',description:row?.description || '',sensitive:row?.sensitive || false,})

const elFormRef = ref();
// @ts-ignore
const validator = (r:any,v:string,c:any) => {
    if(row || !v || !names.includes(v)){
        c();
    }
    else{
        c(t('param-add-validate-failed'))
    }
}

const handleCancel = async () => {
    box.close();
}
const handleSubmit = async () => {
    try {
        await elFormRef.value?.validate();
    } catch (error) {
        console.error(error);
        return ;
    }
    emits("submit",model)
    box.close();
}
</script>

<template>
    <div class="flex flex-col gap-10px w-40vw h-fit max-h-40vh" @click.stop="">
        <div class="h-40px flex justify-between items-center">
            <div>{{ title ? title : row == undefined ? t('param-add-add') : t('param-add-edit') }}</div>
            <div>
                <ElButton type="default" plain @click.stop="handleCancel">{{t('box-cancel-text')}}</ElButton>
                <ElButton type="primary" @click.stop="handleSubmit">{{t('box-submit-text')}}</ElButton>
            </div>
        </div>
        <div class="flex-1 overflow-auto p-x-20px">
            <ElForm ref="elFormRef" :model="model"  label-position="left">
                <ElFormItem prop="name" :label="t('param-add-name-label')"  :rules="[{required:true,message:t('param-add-name-rule')},{validator}]">
                    <ElInput v-model="model.name" :disabled="!title && row != undefined"></ElInput>
                </ElFormItem>
                <ElFormItem prop="value" :label="t('param-add-value-label')" >
                    <ElInput v-model="model.value" type="textarea" :placeholder="t('param-add-value-placeholder')"></ElInput>
                </ElFormItem>
                <ElFormItem prop="sensitive" :label="t('param-add-sensitive-label')">
                    <ElSwitch v-model="model.sensitive" :disabled="row != undefined" :active-text="t('param-add-sensitive-active')" :inactive-text="t('param-add-sensitive-inactive')"></ElSwitch>
                    <!-- <ElCheckbox v-model="model.sensitive" :disabled="row != undefined" ></ElCheckbox> -->
                </ElFormItem>
                <ElFormItem prop="description" :label="t('param-add-desc-label')">
                    <ElInput v-model="model.description" type="textarea"></ElInput>
                </ElFormItem>
            </ElForm>
        </div>
    </div>
</template>